import React, { Component } from 'react';
import { Message, Form, Input, Loading, Button } from '@alifd/next';
import CosUploader from '../../components/CosUploader';
import request from '../../utils/request';

const FormItem = Form.Item;

export default class SiteHome extends Component {
  static displayName = 'SiteHome';

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      pictureList: [],
      formData: {
        title: '',
        description: '',
      },
    };
  }

  componentDidMount() {
  }

  getList = () => {
    request.post('http://127.0.0.1:3016/genera-list').then((response) => {
      console.log('response', response);
    });
  }

  handleSubmit = (e) => {
    console.log('handleSubmit', e);
    request.post('http://127.0.0.1:3016', e).then((response) => {
      console.log('response', response);
    });
  }

  onUpload = (key, e) => {
    console.log('onUpload', key, e);
  }

  render() {
    const { formData, loading, pictureList } = this.state;
    return (
      <div className="card-bg" >
        <Button onClick={this.getList.bind(this)}>一键生成文件123</Button>
        <Loading visible={loading} shape="fusion-reactor" style={{ display: 'block' }}>
          <Form style={{ width: '60%' }}>
            <FormItem label="标题:" required >
              <Input name="title" defaultValue={formData.title} />
            </FormItem>
            <FormItem label="图片:">
              <CosUploader files={pictureList} onUpload={this.onUpload.bind(this, 'key')} />
            </FormItem>
            <FormItem label="描述:" required requiredMessage="描述为必填">
              <Input.TextArea name="description" placeholder="输入描述" defaultValue={formData.description} />
            </FormItem>
            <FormItem label="">
              <Form.Submit validate onClick={this.handleSubmit}>提交</Form.Submit>
            </FormItem>
          </Form>
        </Loading>
      </div>
    );
  }
}
